<template>
  <div>
    <el-dialog title="导出数据" :visible.sync="visible" size="tiny">
      <el-row>
        <el-col :span="24">
          请选择要导出的字段【注意请按照你想要的顺序依次进行选择】:
        </el-col>
        <el-col :span="24" style="padding-top:20px">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkTitles">
            <el-checkbox style="width:200px;margin-left:10px" @change="setValue(v)" v-for="(v,i) in prop" :key="i" :label="v.label"></el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col :span="24" style="padding-top:20px">
          你已选择的字段:{{checkTitles}}
        </el-col>
        <el-col :span="24" style="padding-top:20px" align="center">
          <el-button type="warning" @click="visible2=false">取消</el-button>
          <el-button type="primary" @click="exportData">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import JSONToCSV from "../../utils/jsonToCSV.js";
import * as api from "@/api/realpopulation/index";
export default {
  data() {
    return {
      prop: [
        {
          name: "name",
          label: "姓名"
        },
        {
          name: "netGridName",
          label: "所属网格"
        },
        {
          name: "nameUsed",
          label: "曾用名"
        },
        {
          name: "sex",
          label: "性别"
        },
        {
          name: "ethnicityName",
          label: "民族"
        },
        {
          name: "birthDate",
          label: "出生日期"
        },
        {
          name: "politics",
          label: "政治面貌"
        },
        {
          name: "educationTypeName",
          label: "学历"
        },
        {
          name: "nativePlace",
          label: "籍贯"
        },
        {
          name: "maritalStatus",
          label: "婚姻状况"
        },
        {
          name: "careerTypeName",
          label: "职业类别"
        },
        {
          name: "career",
          label: "职业"
        },
        {
          name: "mobileTel",
          label: "移动电话"
        },
        {
          name: "fixedTel",
          label: "固定电话"
        },
        {
          name: "isSpecialPopulation",
          label: "是否特殊人群"
        },
        {
          name: "servedPlace",
          label: "服务处所"
        },
        {
          name: "domicileAddress",
          label: "户籍地"
        },
        {
          name: "domicileAddressDetail",
          label: "户籍地详细地址"
        },
        {
          name: "presentAddress",
          label: "现住地"
        },
        {
          name: "presentAddressDetail",
          label: "现住地详细地址"
        }
      ],
      isIndeterminate: true,
      checkAll: false,
      checkTitles: [],
      checkValues: [],
      visible2: false
    };
  },
  watch: {
    visible: function(val) {
      if (val == false) {
        this.checkTitles = [];
        this.checkValues = [];
      }
      this.$emit("setVisible", val);
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    filters: {
      type: Object,
      default: {}
    },
    fileName:{
      type:String,
      default:''
    }
  },
  methods: {
    handleCheckAllChange(event) {
      if (this.checkAll) {
        this.checkTitles = [];
        this.prop.forEach(k => {
          this.checkTitles.push(k.label);
        });
        this.checkValues = [...this.prop];
      } else {
        this.checkTitles = [];
        this.checkValues = [];
      }
      this.isIndeterminate = false;
    },
    getSex(val) {
      switch (val) {
        case 0:
          return "未知的性别";
        case 1:
          return "男性";
        case 2:
          return "女性";
        case 99:
          return "未说明性别";
      }
    },
    setValue(v) {
      let index;
      let f = this.checkValues.some((k, i) => {
        if (v.label == k.label) {
          index = i;
          return true;
        }
      });
      if (!f) this.checkValues.push(v);
      else this.checkValues.splice(index, 1);
    },
    async exportData() {
      let { data } = await api.getServedPersonBasicForExcel(this.filters);
      let keys = [];
      this.checkTitles = [];
      this.checkValues.forEach(v => {
        keys.push(v.name);
        this.checkTitles.push(v.label);
      });

      let that = this;
      new Promise(resolve => {
        JSONToCSV.setDataConver({
          data: data,
          fileName: that.fileName,
          columns: {
            title: this.checkTitles,
            key: keys,
            formatter: (k, v, row) => {
              if (v == undefined || v == null) {
                return "\t";
              }
              if (k == "certID" || k == "mobileTel" || k == "fixedTel")
                return v + "\t";
              else if (k == "sex") {
                return that.getSex(v);
              }
            }
          }
        });
        resolve();
      }).then(() => {
        this.visible = false;
      });
    }
  }
};
</script>
